<template>
  <div class="div">
    <el-row :gutter="20">
    <el-col :span="4">

      <el-divider>
        <span>所在地区</span>
      </el-divider>
      <el-tree
          :props="props"
          :load="loadNode"
          lazy
          show-checkbox
      >
      </el-tree>
    </el-col>
    <el-col :span="19">
      <!--  v-hasPerimi="['system:schoolaccount:add']" -->
      <div class="buttons">
        <el-button type="primary" 
        icon="Plus"
         @click="handleAdd" 
         plain
         >添加</el-button>
        <el-button type="danger" 
        icon="Edit" 
        @click="handleDelete" 
        plain
        >删除</el-button>
        <el-button type="success" 
        icon="Search" 
        @click="handleQuery" 
        plain
        >搜索</el-button>
        <el-button icon="Download">下载模板</el-button>
        <el-button icon="Upload">批量导入</el-button>
      </div>

      <div class="table">
        <el-table
            :data="schoolAccountData"
            @selection-change="handleSelectionChange"
            border
        >
          <el-table-column type="selection"  width="55" align="center"/>
          <el-table-column label="帐号" align="center" prop="id"/>
          <el-table-column label="学校" align="center" prop="school"/>
          <el-table-column label="所在地" align="center" prop="address"/>
          <el-table-column label="姓名" align="center" prop="name"/>
          <el-table-column label="手机" align="center" prop="phone"/>
          <el-table-column label="备注" align="center"/>
          <el-table-column label="注册时间" align="center" prop="createdTime">
            <template #default="scope">
              <span>{{ parseTime(scope.row.createdTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="登录时间" align="center" prop="updatedTime">
            <template #default="scope">
              <span>{{ parseTime(scope.row.updatedTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="status">
            <el-switch v-model="isOn"/>
          </el-table-column>
          <el-table-column label="申请表" align="center" prop="application"/>
          <el-table-column label="操作" align="center" width="160px">
            <template #default="scope">
              <el-button link type="primary" @click="handleEdit(scope.row)">修改</el-button>
              <el-button link type="primary" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>
    </el-col>
  </el-row>

 <!-- 添加学校账号对话框 -->
 <el-dialog title="添加账号" v-model="addAccountVisible" width="500px" append-to-body>
      <el-form ref="schoolAccountRef" :model="schoolAccountForm" :rules="schoolAccountRules" label-width="80px">
<el-form-item label="学校" prop="school">
  <el-input v-model="schoolAccountForm.school" placeholder="请输入学校" />
</el-form-item>
<el-form-item label="所在地" prop="address">
  <el-input v-model="schoolAccountForm.address" placeholder="请输入所在地" />
</el-form-item>
<el-form-item label="姓名" prop="name">
  <el-input v-model="schoolAccountForm.name" placeholder="请输入姓名" />
</el-form-item>
<el-form-item label="手机" prop="phone">
  <el-input v-model="schoolAccountForm.phone" placeholder="请输入手机" />
</el-form-item>
<el-form-item label="注册时间" prop="createdTime">
  <el-date-picker clearable
            v-model="schoolAccountForm.createdTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择注册时间">
    </el-date-picker>
</el-form-item>
<el-form-item label="登录时间" prop="updatedTime">
  <el-date-picker clearable
            v-model="schoolAccountForm.updatedTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择登录时间">
    </el-date-picker>
</el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="addSubmitForm">确 定</el-button>
          <el-button @click="addAccountVisible=false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

 <!-- 修改学校账号对话框 -->
 <el-dialog title="修改账号" v-model="editAccountVisible" width="500px" append-to-body>
      <el-form ref="editAccountRef" :model="editAccountForm" :rules="editAccountRules" label-width="80px">
<el-form-item label="学校" prop="school">
  <el-input v-model="editAccountForm.school" placeholder="请输入学校" />
</el-form-item>
<el-form-item label="所在地" prop="address">
  <el-input v-model="editAccountForm.address" placeholder="请输入所在地" />
</el-form-item>
<el-form-item label="姓名" prop="name">
  <el-input v-model="editAccountForm.name" placeholder="请输入姓名" />
</el-form-item>
<el-form-item label="手机" prop="phone">
  <el-input v-model="editAccountForm.phone" placeholder="请输入手机" />
</el-form-item>
<el-form-item label="注册时间" prop="createdTime">
  <el-date-picker clearable
            v-model="editAccountForm.createdTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择注册时间">
    </el-date-picker>
</el-form-item>
<el-form-item label="登录时间" prop="updatedTime">
  <el-date-picker clearable
            v-model="editAccountForm.updatedTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择登录时间">
    </el-date-picker>
</el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="editSubmitForm">确 定</el-button>
          <el-button @click="editAccountVisible=false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
 
</template>

<script setup name="schoolaccount">
import {ref} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

let count = 1
const isOn = ref(true)
const addAccountVisible=ref(false)
const editAccountVisible=ref(false)
const data=reactive({
  form:{
  },
  rules:{}
})
// const {schoolAccountform,schoolAccountrules}=toRefs(data)
const schoolAccountForm = ref({
  id: '',
  school: '',
  address: '',
  name: '',
  phone: '',
  status: '',
  application: '',
  createdTime: '',
  updatedTime: ''
})
const schoolAccountRules=ref({})
const editAccountForm = ref({
  id: '',
  school: '',
  address: '',
  name: '',
  phone: '',
  status: '',
  application: '',
  createdTime: '',
  updatedTime: ''
})
const editAccountRef=ref({})

const schoolAccountData = reactive([
  {
    id: '111',
    school: '滨州市第一小学',
    address: '滨州市滨城区',
    name: '梁亚龙',
    phone: '15612345678'
  },
  {
    id: '111',
    school: '滨州市第一小学',
    address: '滨州市滨城区',
    name: '梁亚龙',
    phone: '15612345678'
  }
])
const props = {
  label: 'name',
  children: 'zones',
}

const loadNode = (node, resolve) => {
  if (node.level === 0) {
    return resolve([{name: '滨城区'}, {name: '沾化区'}]);
  }
  if (node.level > 3) return resolve([]);
  let hasChild = true
  if (node.data.name === '枣园街道') {
    hasChild = true;
  } else if (node.data.name === '金雀山街道') {
    hasChild = false;
  } else {
    hasChild = Math.random() > 0.5;
  }
  setTimeout(() => {
    let data;
    if (hasChild) {
      data = [{
        name: '枣园街道' + this.count++
      }, {
        name: '金雀山街道' + this.count++
      }];
    } else {
      data = [];
    }

    resolve(data);
  }, 500);
}

// 新增按钮操作
const handleAdd=()=> {
  console.log(1);
  // reset();
  addAccountVisible.value = true;
  console.log(addAccountVisible.value);
}
// 修改按钮操作
const handleEdit=()=>{
  editAccountVisible.value = true;
}
//删除按钮对话框
const deleteOpen = () => {
  ElMessageBox.confirm(
    '是否确认删除该数据项?',
    '系统提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}
//删除方法
const handleDelete=()=>{
  deleteOpen();
  console.log('handleDelete');
}
// 搜索方法
const handleQuery = () => {
  console.log('handleQuery')
}

//添加表单确定按钮操作
const addSubmitForm = () => {
 addAccountVisible.value = false;
}
//修改表单确定按钮操作
const editSubmitForm = () => {
 editAccountVisible.value = false;
}
//多选框操作
const handleSelectionChange = () => {
  console.log('handleSelectionChange')
}

</script>

<style scoped>

.buttons {
  margin-top: 10px;
}

.table{
  margin-top: 15px;
}

</style>